/*
 * @Description: Have A Nice Day!
 * @Author: Jacky
 * @Date: 2020-02-13 14:35:55
 * @LastEditors  : Jacky
 * @LastEditTime : 2020-02-13 15:43:46
 */
import React, {useState} from 'react'
import styles from './index.module.css'
export default function Row(props) {
    let [isShowCity, setShowCity] = useState(false)
    let {data} = props;
    let {name, today, total, children} = data
    let toggleCity = ()=>{
        setShowCity(!isShowCity)
    }

    return (
        <div className="table-row">
            <div onClick={toggleCity} className={styles['row']+" "+styles[isShowCity?'row-title-active':'row-title']}>
                <span className={styles['highlight']}>{name}</span>
                <span className={styles['highlight']}>{today.confirm}</span>
                <span>{total.confirm}</span>
                <span>{total.heal}</span>
                <span>{total.dead}</span>
                <span>{total.deadRate}</span>
            </div>
            <div className={styles['fold-list']+" "+styles[isShowCity ? 'show': ""]}>
                {
                    children.map((item,index)=>(
                        <div className={styles['row']} key={'subrow'+index}>
                            <span>{item.name}</span>
                            <span>{item.today.confirm}</span>
                            <span>{item.total.confirm}</span>
                            <span>{item.total.heal}</span>
                            <span>{item.total.dead}</span>
                            <span>{item.total.deadRate}</span>
                        </div>
                    ))
                }
                
            </div>
            
        </div>
    )
}
